<template>
  <v-card>
    <v-toolbar color="cyan" dark height="45">
      <v-toolbar-title>本周发布统计</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card-text>
      <v-layout row wrap ref="chartWindow" v-resize="onResize">
        <v-flex xs12 sm6 md6>
          <div id="pubContainer" :style="'width:'+ width +';'+'height:'+ height +';'+'max-width: 740px'" ref="pc" ></div>
        </v-flex>
      </v-layout>
    </v-card-text>
  </v-card>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import {fetch} from '../../utils/axios'
require('echarts/lib/chart/bar')
export default {
  name: 'pub-svg',
  data () {
    return {
      width: '',
      height: '275px',
      option: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          // 坐标轴指示器，坐标轴触发有效
          axisPointer: {
            // 默认为直线，可选为：'line' | 'shadow'
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
  },
  mounted () {
    let pubChart = echarts.init(document.getElementById('pubContainer'))
    this.getData()
    setTimeout(() => {
      pubChart.setOption(this.option, true)
    }, 1000)
    this.onResize()
  },
  methods: {
    onResize () {
      this.$refs.pc.style.width = this.$refs.chartWindow.clientWidth * 0.95 + 'px'
    },
    getData () {
      fetch('/dashboard/list_pub_chart/', {}).then((response) => {
        this.option.xAxis[0].data = response.data
        this.option.series[0].data = response.value
      }).catch((error) => {
        console.log(error.response.data.detail)
      })
    }
  }
}
</script>

<style scoped>

</style>
